import React, { useState, useEffect, useMemo } from 'react'
import { Modal, Table, Typography, Space, Button } from 'antd'

import request from '@/utils/request'
// import { DesensitizeInfo } from '@/components'

import type { RecordItem } from '../type'

interface Props {
  open?: boolean
  selRecord?: RecordItem
  onCancel: () => void
}

const { Text } = Typography

const ViewModal: React.FC<Props> = ({ open, onCancel, selRecord }) => {
  const [detail, setDetail] = useState<RecordItem>({} as RecordItem)
	const [data, setData] = useState<RecordItem[]>([]);


	useEffect(() => {
    if (open && selRecord) {
      queryDetail()
    }
  }, [open, selRecord])

  const queryDetail = () => {
    request('userManageQueryById', { data: { userId: selRecord?.id } }).then(res => {
      if (res.code === 0 && res.data) {
        setDetail(res.data)
				setData([res.data])
      }
    })
  }

  const handleCancel = () => {
    onCancel()
  }

  const items = [
    { label: '用户角色', value: detail?.courseName },
    // { label: '数据范围', value: detail?.dataScope },
    // { label: '平台权限', value: detail?.entityName },
    // { label: '有效截止日期', value: detail?.accountExpire },
  ]

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
    },
    // {
    //   title: '手机号',
    //   dataIndex: 'phoneDes',
    //   width: 160,
    //   render(text: string, record: RecordItem) {
    //     return (
		// 			<div></div>
    //       // <DesensitizeInfo
    //       //   rawInfo={text}
    //       //   // realInfo={record.phone}
    //       //   data={{ encryptStr: record.phone }}
    //       // ></DesensitizeInfo>
    //     )
    //   },
    // },
    {
      title: '姓名',
      dataIndex: 'realName',
    },
    // {
    //   title: '用户类型',
    //   dataIndex: 'userTypeName',
    // },
    {
      title: '启用状态',
      dataIndex: 'status',
      render(text: 0 | 1) {
        return text ? '启用' : '停用'
      },
    },
  ]

  return (
    <Modal
      title="查看用户信息"
      width={640}
      maskClosable={false}
      open={open}
      bodyStyle={{ maxHeight: 550, overflowY: 'auto' }}
      onCancel={handleCancel}
      footer={[
        <Button key="known" type="primary" onClick={handleCancel}>
          知道了
        </Button>,
      ]}
    >
      <Text strong>基本信息</Text>
      <Table
        style={{ marginBottom: 30, marginTop: 10, background:'#fff' }}
        dataSource={data}
        columns={columns}
        rowKey={record => record.id}
        pagination={false}
      />

      <Text strong style={{ display: 'block', marginBottom: 10 }}>
        权限信息
      </Text>
      <Space direction="vertical">
        {items.map((item, index) => {
          return (
            <div key={index}>
              <Space style={{ marginTop: 3, marginBottom: 8 }} key={index}>
                <Text className="dark05" style={{ display: 'inline-block', width: '90px' }}>
                  {item.label}
                </Text>
                <Text>{item.value}</Text>
              </Space>
            </div>
          )
        })}
      </Space>
    </Modal>
  )
}

export default ViewModal
